<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="https://www.zealer.com/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/nav.css">
    <link rel="stylesheet" href="./css/clearSure.css">
    <link rel="stylesheet" href="./css/register.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2952901_w18tt9hv7ee.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>ZEALER 官网_Technology Stays True Here </title>
</head>
<style>

</style>

<body>
    <div class="nav_bgc">
        <div class="nav" style="width: 1080px;">
            <div class="logo"><img
                    src="https://www.zealer.com/dist/images/sidebar_icon_logo_normal8@2x.png?651c9ec30079873f09a3b98276f462ca"
                    alt=""></div>
            <ul class="chose">
                <li><a href="index.html">首页</a></li>
                <li><a href="community.html">社区</a></li>
                <li><a href="expert.html">达人专区</a></li>
                <li class="act"><a href="active.html">活动</a>
                    <img src="https://www.zealer.com/dist/images/icons_images_PC_dark_hot@2x.png?651c9ec30079873f09a3b98276f462ca"
                        alt="">
                </li>
            </ul>
            <div class="search">
                <i class="iconfont icon-search"></i>
                <input type="text" placeholder="搜索作品/话题/用户">
            </div>
            <div class="head_link">
                <a href="" class="down down_phone">
                    <i class="iconfont icon-xiazai"></i>
                    <p>下载手机版</p>
                    <div class="qrCode">
                        <span class="tria"></span>
                        <img src="https://www.zealer.com/dist/images/qrcode-app.png?651c9ec30079873f09a3b98276f462ca"
                            alt="">
                        <p>ZEALER 手机版</p>
                    </div>
                </a>
                <a href="" class="down">
                    <i class="iconfont icon-bianji"></i>
                    <p>创作平台</p>
                </a>
                <div class="login">
                    <div class="rig">
                        <a href="login.html">登录</a>
                        <span>|</span>
                        <a href="sign.html">注册</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="all">
        <div class="login-top">
            <div class="login-left-bg">
                <img src="https://www.zealer.com/dist/images/images_empty_pc_dark_zaaap-login@3x.png?3d9005478201f0ae0099f455f47503fe"
                    alt="">
            </div>
            <div class="login">
                <h2>欢迎注册ZEALER</h2>
                <h3>已有账号？<a href="#">登录</a></h3>
                <div class="ipt">
                    <div class="login-input">
                        <span>+86</span>
                        <input class="phone" type="number" placeholder="手机号">
                    </div>
                    <div class="login-input">
                        <input class="code_ipt" type="number" name="sendcode" placeholder="请输入验证码">
                        <button class="code">获取验证码</button>
                    </div>
                    <div class="login-input">
                        <input class="psw" type="password" placeholder="请设置密码（密码至少6位数字、字母或符号组成）" maxlength="20"> <i
                            class="iconfont icon-xianshi"></i>
                    </div>
                    <div class="login-input">
                        <input class="pswSure" type="password" placeholder="请再次输入密码" maxlength="20"> <i
                            class="iconfont icon-xianshi"></i>
                    </div>
                </div>
                <div class="register-info">
                    <span>注册即表明您同意我们的</span>
                    <a href="/home/document?type=agreement">《使用条款》</a> <a href="/home/document?type=privacy">《隐私政策》</a>
                </div>
                <div class="login-button"><button id="sign">注册</button></div>
            </div>
        </div>
        <div class="login-agree">
            <p><a href="http://beian.miit.gov.cn/" target="_blank">粤 lCP 备 12076188 号 | </a> <a
                    href="/home/document?type=business" target="_blank">ICP经营许可证：粤B2-20190404</a></p>
            <p>Copyright © 2021 ZEALER. All Rights Reserved. </p>
        </div>
    </div>
    <div class="toast" style="display: none;">
        <p></p>
    </div>
    <script src="js/nav.js"></script>
    <script>
        // 密码显示
        var flag = true;
        $('.icon-xianshi').click(function () {
            if (flag) {
                $(this).prev().attr('type', 'text')
                flag = false
            } else {
                flag = true
                $(this).prev().attr('type', 'password')
            }
        })
        // 正则验证
        var reg_phone = /^1[^1,2][0-9]{9}$/
        var reg_psw = /^[0-9a-zA-Z]{6,20}$/
        function to() {
            $('.toast').css({ "opacity": "0" })
        }
        ok_remove = () => {
            $('.toast p').removeClass('ok')
        }
        function have() {
            $('.toast').css({ "display": "block" })
            $('.toast').css({ "opacity": "1" })
        }
        $('#sign').click(function () {
            if ($('.phone').val() == '' | $('.code_ipt').val() == '' | $('.psw').val() == '' | $('.pswSure').val() == '') {
                $('.toast p').text('请完善全部信息')
                have()
                setTimeout(to, 3000)
            } else if (!reg_phone.test($('.phone').val())) {
                $('.toast p').text('手机号码格式错误')
                have()
                setTimeout(to, 3000)
            } else if (!reg_psw.test($('.psw').val())) {
                $('.toast p').text('密码格式错误')
                have()
                setTimeout(to, 3000)
            } else if ($('.psw').val() != $('.pswSure').val()) {
                $('.toast p').text('请确认您再次输入的密码')
                have()
                setTimeout(to, 3000)
            } else {
                localStorage.setItem('user', JSON.stringify({ phone: $('.phone').val(), psw: $('.psw').val() }))
                $('.toast p').text('注册成功')
                $('.toast p').addClass('ok')
                have()
                setTimeout(to, 3000)
                setTimeout(ok_remove, 4000)
            }
        })
    </script>
</body>

</html>